<!DOCTYPE html>
<html>

<head>
    <title>丝绸之路</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">

    <script
        src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link rel="stylesheet" href="css/ol3-layerswitcher.css" type="text/css">
    <link rel="stylesheet" href="css/main.css" type="text/css">
    <link rel="stylesheet" href="layui/css/layui.css" type="text/css">
    <style>
        html,
        body,
        #map {
            width: 100%;
            height: 100%;
            overflow: hidden;
            border: none;
            padding: 0;
            margin: 0;
        }

        .ol-popup {
            position: absolute;
            background-color: white;
            -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
            filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
            padding: 15px;
            border-radius: 10px;
            border: 1px solid #cccccc;
            bottom: 12px;
            width: 295px;
            max-height: 300px;
            left: -50px;
        }

        .ol-popup:after,
        .ol-popup:before {
            top: 100%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
        }

        .ol-popup:after {
            border-top-color: white;
            border-width: 10px;
            left: 48px;
            margin-left: -10px;
        }

        .ol-popup:before {
            border-top-color: #cccccc;
            border-width: 11px;
            left: 48px;
            margin-left: -11px;
        }

        .ol-popup-closer {
            text-decoration: none;
            position: absolute;
            top: 2px;
            right: 8px;
        }

        .ol-popup-closer:after {
            content: "✖";
        }

        #popup-content {
            font-size: 14px;
            font-family: "微软雅黑";
        }

        #popup-content .markerInfo {
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div id="map" class="map">
        <div id="popup" class="ol-popup">
            <a href="#" id="popup-closer" class="ol-popup-closer"></a>
            <div id="popup-content">
            </div>
        </div>
        <div class="location ol-control">
            <button class="location-reset" type="button" title="复位"><span class="ol-compass"
                    style="transform: rotate(0rad);"></span></button>
        </div>
        <div class="citySilk ol-control">
            <button class="btn-citySilk" type="button" title="沿途城市"><span class="ol-compass"
                    style="transform: rotate(0rad);"></span></button>
        </div>
        <div class="ruinsSilk ol-control">
            <button class="btn-ruinsSilk" type="button" title="文化遗址"><span class="ol-compass"
                    style="transform: rotate(0rad);"></span></button>
        </div>

    </div>
    <script src="layui/layui.js"></script>
    <script src="js/ol3-layerswitcher.js"></script>
    <script src="js/main.js"></script>
</body>

</html>